<template>
    <el-dialog
            :title="title"
            :visible.sync="isVisible"
            :width="width"
            :before-close="handleClose"
            :lock-scroll="true"
            :close-on-click-modal="false"
            custom-class="pub_dialog"
            @open="getData"
    >
        <VForm
                ref="vformComponents"
                :form="formData.form"
                :options="formData.options"
                :rules="formData.rules"
                :labelWidth="formData.labelWidth"
                :rowspan="rowspan"
                @toLoadMethods="toLoadMethods"
        ></VForm>

        <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure" v-if="openType!='detail'">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
    import { hazardlDataReportDetail,
            hazardlDataReportUpdate,
            hazardlDataReportAdd } from '@/api/risk/hazardReport'
    import { treeDataChild} from '@/api/risk/treeData'
    import VForm from "@/components/VForm/index";
    export default {
        components: {
            VForm,
        },
        props: {
            width: {
                type: String,
                default: "70%",
            },
            title: {
                type: String,
                default: "详情",
            },
            id:{},
            openType:{
                type:String,
                default:"add"
            },
            dialogVisible: {
                type: Boolean,
                default: false
            },
            hazardBClassifyOptions:{},
            patrolHazardLevelOptions:{}
        },
        watch: {
            'width': {
                handler(newVal, oldVal) {
                    console.log('newVal===',newVal, oldVal)
                    let w = this.width.split('%')[0]
                    if(w>=60){
                        this.rowspan = 2
                    }else{
                        this.rowspan = 1
                    }
                },
                deep: true,
                immediate: true
            },
          'hazardBClassifyOptions':{
            handler(newVal, oldVal) {
              this.formData.options.forEach(t=>{
                if(t.key=='fxyhdl'){
                  t.option.data = newVal
                }
              })
            },
            deep: true,
            immediate: true
          },
          'hazardSClassifyOptions':{
            handler(newVal, oldVal) {
              this.formData.options.forEach(t=>{
                if(t.key=='fxyhxl'){
                  t.option.data = newVal
                }
              })
            },
            deep: true,
            immediate: true
          },
          'hazardCategoryOptions':{
            handler(newVal, oldVal) {
              this.formData.options.forEach(t=>{
                if(t.key=='fxyhsjlb'){
                  t.option.data = newVal
                }
              })
            },
            deep: true,
            immediate: true
          },
          'patrolHazardLevelOptions':{
            handler(newVal, oldVal) {
              this.formData.options.forEach(t=>{
                if(t.key=='fxyhdj'){
                  t.option.data = newVal
                }
              })
            },
            deep: true,
            immediate: true
          },
          'openType':{
            handler(newVal, oldVal) {
              this.formData.options.forEach(t=>{
                if(t.key=='fxyhpf' || t.key=='fxyhfxbg'){
                  t.disabled = newVal == 'detail'
                }
              })
            },
            deep: true,
            immediate: true
          }
        },
        computed: {
            isVisible: {
                get() {
                    return this.dialogVisible
                },
                set() {
                    this.close()
                }
            }
        },
        data() {
            return {
                hazardSClassifyOptions:[],
                hazardCategoryOptions:[],
                rowspan:1,
                dict:{},
                formData: {
                    form: {
                            csjs:"",
                            areaCode:"",
                            tjyf:"",
                            fxyhdl:"",
                            fxyhxl:"",
                            fxyhsjlb:"",
                            fxyhdj:"",
                            fxyhpf:"",
                            dyfxyhgs:"",
                            fxyhfxbg:[],
                        },
                    options: [
                                   {
                                       title: "城市简述",
                                       key: "csjs",
                                       type: "text",
                                        disabled:true
                                   },
                                   {
                                       title: "统计月份",
                                        key: "tjyf",
                                        type: "text",
                                        disabled:true
                                   },
                                   {
                                       title: "风险隐患大类",
                                       key: "fxyhdl",
                                       type: "select",
                                       multiple:false,
                                       option: {
                                         data: this.hazardBClassifyOptions,
                                         props: {
                                           key: "id", // 指定key对应data的字段
                                           label: "label", // 指定label对应data的字段
                                           value: "name", // 指定value对应data的字段
                                         },
                                       },
                                       disabled:true
                                   },
                                   {
                                       title: "风险隐患细类",
                                       key: "fxyhxl",
                                       type: "select",
                                       multiple:false,
                                       option: {
                                         data: this.hazardSClassifyOptions,
                                         props: {
                                           key: "id", // 指定key对应data的字段
                                           label: "label", // 指定label对应data的字段
                                           value: "name", // 指定value对应data的字段
                                         },
                                       },
                                       disabled:true
                                   },
                                   {
                                       title: "风险隐患三级类别",
                                       key: "fxyhsjlb",
                                       type: "select",
                                       multiple:false,
                                       option: {
                                         data: this.hazardCategoryOptions,
                                         props: {
                                           key: "id", // 指定key对应data的字段
                                           label: "label", // 指定label对应data的字段
                                           value: "name", // 指定value对应data的字段
                                         },
                                       },
                                       disabled:true
                                   },
                                   {
                                       title: "风险隐患等级",
                                       key: "fxyhdj",
                                      type: "select",
                                      multiple:false,
                                      option: {
                                        data: this.patrolHazardLevelOptions,
                                        props: {
                                          key: "id", // 指定key对应data的字段
                                          label: "label", // 指定label对应data的字段
                                          value: "value", // 指定value对应data的字段
                                        },
                                      },
                                      disabled:true
                                   },
                                   {
                                       title: "当月风险隐患个数",
                                       key: "dyfxyhgs",
                                       type: "text",
                                     disabled:true
                                   },
                                  {
                                    title: "风险隐患评分",
                                    key: "fxyhpf",
                                    type: "text",
                                  },
                                   {
                                       title: "风险隐患分析报告",
                                       key: "fxyhfxbg",
                                       type: "file",
                                       fileType:"file",
                                       listType:"text",
                                       uploadTextTip:""
                                   },
                    ],
                    rules: {
                    },
                    labelWidth: "140px",
                },
            // 字典
            };
        },
        methods: {
          toLoadMethods(methods){
            this[methods]();
          },
          async sendBclassifyData(){
            let queryData ={}
            queryData.name='hazardBClassify';
            queryData.code =this.formData.form.fxyhdl;
            let res =await treeDataChild(queryData);
            if(res.code==200) {
              let that = this
              res.data.forEach(function (item,index){
                var one ={}
                one.label= item.label;
                one.name=item.code;
                one.modeType=item.modeType;
                that.hazardSClassifyOptions.push(one);
              })
            }
          },
          async sendCategoryData(){
            let queryData ={}
            queryData.name='hazardSClassify';
            queryData.code =this.formData.form.fxyhxl;
            let res =await treeDataChild(queryData);
            if(res.code==200) {
              let that = this
              res.data.forEach(function (item,index){
                var one ={}
                one.label= item.label;
                one.name=item.code;
                that.hazardCategoryOptions.push(one);
              })
            }
          },
            submitFormat(){
                   this.formData.form.tjyf = null
                   this.formData.form.TJYF = null
                   this.formData.form.fxyhfxbg = JSON.stringify(this.formData.form.fxyhfxbg)
            },
            loadFormat(){
                    this.formData.form.fxyhfxbg  =this.formData.form.fxyhfxbg  ? JSON.parse(this.formData.form.fxyhfxbg) :[]

            },
            sure(){
                console.log('sure===',this.formData.form)
                this.$refs.vformComponents.$refs.form.validate().then(res=>{
                    this.submitFormat()
                    if(this.openType == "add"){
                        this.add()
                    }else{
                        this.update()
                    }
                })
            },
            add(){
                this.formData.form.id = null
                hazardlDataReportAdd(this.formData.form).then(res=>{
                    if(res.code==200){
                    this.$message({
                        message: this.$t('tips.createSuccess'),
                        type: 'success'
                    })
                    this.closeSuccess()
                    }else{
                    this.$message({
                        message: this.$t('tips.systemException'),
                        type: 'error'
                    })
                    }
                })
            },
            update(){
                   hazardlDataReportUpdate(this.formData.form).then(res=>{
                        if(res.code==200){
                        this.$message({
                             message: this.$t('tips.updateSuccess'),
                            type: 'success'
                        })
                        this.closeSuccess()
                      }else{
                        this.$message({
                            message: this.$t('tips.systemException'),
                            type: 'error'
                        })
                     }
                })
            },
            cancel(){
                this.close()
            },
            handleClose(done) {
                done()
                this.close()
            },
            closeSuccess(){
                this.$refs.vformComponents.$refs.form.resetFields();
                this.$emit('success')
            },
            close(){
                this.$refs.vformComponents.$refs.form.resetFields();
                this.$emit('close')
            },
            getData(){
                if(this.openType!="add"){
                    hazardlDataReportDetail(this.id).then(res=>{
                        if(res.code==200){
                            this.formData.form = res.data
                            this.loadFormat()
                            this.sendBclassifyData()
                            this.sendCategoryData();
                         }else{
                            this.$message({
                                message: this.$t('tips.systemException'),
                                type: 'error'
                            })
                        }
                    })
                }
            }
        },
    };
</script>

<style lang="scss" scoped>

</style>
